<template>
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import elementResizeDetectorMaker from 'element-resize-detector'

const erd = elementResizeDetectorMaker()
const geoJSON = {
  nanchang_full: require('./nanchang_full.json'),
  nanchang: require('./nanchang.json'),
  buildings: require('./buildings.json')
}
export default {
  name: 'map-center',
  props: {
    map: {
      type: String,
      default: 'nanchang_full'
    },
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    enterpriseList () {
      return this.$store.state.energyEnterpriseList
    },
  },
  data () {
    return {
      chart: null,
      option: {},
    }
  },
  watch: {
    enterpriseList: {
      deep: true,
      handler () {
        this.chart.setOption(this.getChartOption())
      },
    }
  },
  mounted () {
    this.$store.dispatch('GET_ENTERPRISE_LIST')

    echarts.registerMap(this.map, geoJSON[this.map])
    const chart = this.chart = echarts.init(this.$refs.chart)

    setTimeout(() => {
      chart.setOption(this.getChartOption())
    }, 200)
    erd.listenTo(this.$refs.chart, function () {
      chart.resize({
        animation: {
          duration: 1000,
        }
      })
    })
  },
  beforeDestroy () {
    erd.removeAllListeners(this.$refs.chart)
  },
  methods: {
    /* eslint-disable */
    getChartOption () {
      const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
      const regions = geoJSON[this.map].features
      const data = this.enterpriseList
      return {
        geo3D: {
          show: true,
          type: 'map3D',
          map: this.map,
          boxHeight: 10,
          // itemStyle: {
          //   borderWidth: 1,
          //   opacity: .5,
          // },
          regions: regions.map((v, i) => ({
            name: v.properties.name,
            label: {
              show: false,
            },
            itemStyle: {
              // color: '#5470c6',
              color: colors[i % colors.length],
              borderColor: '#42955b',
            }
          }))
        },
        series: [
          {
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            symbol: 'path://M512 837.213091l-256.279273 112.919273a28.439273 28.439273 0 0 1-39.749818-28.858182l28.206546-278.621091L57.576727 433.803636a28.439273 28.439273 0 0 1 15.220364-46.731636l273.687273-59.298909 140.939636-241.943273a28.439273 28.439273 0 0 1 49.152 0l140.939636 241.943273 273.687273 59.298909a28.439273 28.439273 0 0 1 15.220364 46.731636l-186.647273 208.849455 28.253091 278.574545a28.439273 28.439273 0 0 1-39.749818 28.904728L512 837.213091z',
            symbolSize: 12,
            itemStyle: {
              color: '#20c997'
            },
            label: {
              show: false,
            },
            data: [
              ...data.map((v, i) => ({
                name: v.districtBelongName,
                value: [
                  v.longitude,
                  v.latitude,
                  1,
                  v.name
                ],
              }))
            ]
          },
        ]
      }
    },
    getData (name) {
      return new Promise((resolve) => {
        const rand = () => Math.round(Math.random() * 1000)
        setTimeout(() => {
          resolve(Array(8).fill(1).map(v => rand()))
        }, 400)
      })
    },
    toHTML (data) {
      const [v1, v2, v3, v4, v5, v6, v7, v8, v9] = data
      return `
        <table class="tooltip-table">
          <caption style="line-height: 2;">${v1}（${v2}家企业）</caption>
          <thead>
            <tr>
              <td>名称</td>
              <td>数值</td>
              <td>单位</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>综合能源消费量</td>
              <td>${v3}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>用电量</td>
              <td>${v4}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>用煤量</td>
              <td>${v5}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>万元工业总产值工业消耗</td>
              <td>${v6}</td>
              <td>千克标准煤/万元</td>
            </tr>
            <tr>
              <td>工业总产值</td>
              <td>${v7}</td>
              <td>万元</td>
            </tr>
            <tr>
              <td>工业增加值</td>
              <td>${v8}</td>
              <td>万吨标准煤</td>
            </tr>
            <tr>
              <td>万元工业增加值综合消耗</td>
              <td>${v9}</td>
              <td>千克标准煤/万元</td>
            </tr>
          </tbody>
        </table>
      `
    },
    update (option = {}) {
      if (this.chart) {
        this.chart.setOption({
          ...this.chartOption,
          ...option
        })
      }
    },
    initScatter () {
      const data = this.enterpriseList
      const chart = this.chart
      const option = {
        series: [
          {
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              color: '#50fdfc'
            },
            data: [
              ...data.map((v, i) => ({
                name: v.districtBelongName,
                value: [
                  v.longitude,
                  v.latitude,
                ],
              }))
            ]
          },
        ],
      }
      chart.setOption(option)
    },
  }
}
</script>
